<template>
    <div class="bigHigh_box">
        <TopOne :obj="obj" :getYao="getYao" :datalist="getList" />
        <div class="customTodo_body">
            <TopTwo :todoButton="todoButton" />
            <Table style="width: 100%;" :columns="columns" :data="corpData" :operate="operate" :detailText="detailText"
                @change="onChange">
            </Table>
            <!-- <Communication></Communication> -->
        </div>
        <MockBox v-if="open" :open="open" :handleOk="handleOk" :data="corpData" />
        <!-- <updateVue></updateVue> -->

    </div>
</template>

<script setup lang="ts">
//用来进行跳转的
import TopOne from "../../components/topOne.vue";
//用来进行搜索框的
import TopTwo from "../../components/topTwo.vue";

import MockBox from '@/components/mockBox.vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// import updateVue from "./components/update.vue";

//封装的button


//table表格来进行封装
import Table from "@/components/Table.vue"
// import axios from "axios";

import { useCounterStore } from '@/store/ticket'

//排序约束
import type { TableColumnType } from 'ant-design-vue';

import { ref, onMounted, computed, reactive } from "vue";
// import { useRouter } from 'vue-router'

import { useRouter } from 'vue-router'
import { lastDays } from "@/utils/method";
// 传给第一个input框的数据
const obj = {
    // 第一个输入框
    inputOne: {
        done: true,
        tishi: "搜索关键词",
    },
    // 后面倒数第二个带小人的输入框
    inputTwo: {
        done: true,
        tishi: "提交人员",
    },
    // 日历输入框
    inputThere: {
        done: true,
        tishi: "提交时间",
    },
    // 3个下拉列表
    selectOne: {
        done: true,
        tishi: "审批状态",
        todoDone: [
            {
                value: "没有跟进",
                label: "没有跟进",
            },
            {
                value: "正在跟进",
                label: "正在跟进",
            },
        ],
    },
    selectTwo: {
        done: true,
        tishi: "公司类型",
        todoDone: [
            {
                value: "个人用户",
                label: "个人用户",
            },
            {
                value: "企业用户",
                label: "企业用户",
            },
        ],
    },
    selectThere: {
        done: false,
        tishi: "客户星级",
        todoDone: [
            {
                label: "⭐",
                value: "1",
            },
            {
                label: "⭐⭐",
                value: "2",
            },
            {
                label: "⭐⭐⭐",
                value: "3",
            },
        ],
    },
};
const store = useCounterStore()

const corpData: any = ref([{}])

const user:any = ref()




const getList = async () => {
    console.log('我别响应了')
    const res: any = await store.interface_getBotun()
    const res1: any = await store.interface_getCorp()
    res.map((item: any) => {
        // console.log(item.last_follow_up_date.slice(0, 10))
        // item.bo_SalesStage = item.bo_SalesStage.slice(0, 10)
        // console.log(item.bo_SalesStage)
        const differenceInDays = lastDays(item.bo_SalesStage)
        item.differenceInDays = `${differenceInDays}天`
        return item
    })
    let bos: any = res1.filter((item: any) => {
        if (item.follow_up_status !== '复杂') {
            console.log(user.value.employee)
            if(item.primary_contact=== user.value.employee){
                // console.log()
                return item
            }
        }
    })
    let nos: any = []
    for (let i = 0; i < bos.length; i++) {
        nos.push(Object.assign(res[i], res1[i]))
    }
    // console.log(nos)
    corpData.value = nos
    // console.log(corpData.value, '我是corp')
}
// onMounted(() => )
// 获取到input的数据
function getYao(value: any) {
    if (value.inputOne) {
        corpData.value = corpData.value.filter((item: { corpName: string | any[]; }) => {
            if (item.corpName.includes(value.inputOne)) {
                return item
            }
        })
    }
    if (value.inputThere) {
        corpData.value = corpData.value.filter((item: { last_follow_up_date: string | any[]; }) => {
            if (item.last_follow_up_date.includes(value.inputThere)) {
                return item
            }
        })
    }

    if (value.selectOne) {
        corpData.value = corpData.value.filter((item: { corpState: any; }) => {
            if (value.selectOne === item.corpState) {
                return item
            }
        })
    }
    if (value.selectTwo) {
        corpData.value = corpData.value.filter((item: { user_type: any; }) => {
            if (item.user_type == value.selectTwo) {
                return item
            }
        })
    }
    console.log(value, 'value');
}

// 点击跳转到详情并传递路由 ----- 用于跳转到详细信息
let detailText = reactive({
    nameOne: "公司名称",
    goTo: "../finance/backguanli"
})


// 操作页面传入的数据
const operate = ref([
    {
        icon: 'icon-genjin',
        title: '跟进',
        click: (_key: any) => { followUp(_key) }
    },
    {
        icon: 'icon-bianji',
        title: '编辑',
        click: (_key: any) => { emitOne(_key) }
    },
    {
        icon: 'icon-zhiding',
        title: '置顶',
        click: (_key: any) => { topping(_key) }
    },
    {
        icon: 'icon-shanchu',
        title: '删除',
        // 括号中的为整列信息 可以切换成别的
        click: (_key: any) => { delOne(_key) }
    }
])
// 声明弹框状态
const open = ref<boolean>(false);
const handleOk = (e: MouseEvent) => {
    console.log(e);
    open.value = false;
};

let dataFinance = ref<any[]>()


//表格跟进
const followUp = (val: any) => {
    // console.log('我是跟进', val)
    // dialogVisible2.value = true
    open.value = true
}

//表格编辑
const emitOne = (val: any) => {
    console.log('我是编辑', val)
    store.getEmitData(JSON.stringify(val))
    rou.push('/home/addtwo')
}
//表格置顶
const topping = (val: any) => {
    console.log('我是置顶', val)
    corpData.value.unshift(val)
}

//表格删除
const delOne = (val: any) => {
    console.log('我是删除', val)
    ElMessageBox.confirm(
        `你确定要删除${val.corpName}吗？`,
        'Warning',
        {
            confirmButtonText: 'OK',
            cancelButtonText: 'Cancel',
            type: 'warning',
        }
    )
        .then(() => {
            ElMessage({
                type: 'success',
                message: '确定删除',
            })
            corpData.value = corpData.value.filter((item: any) => {
                if (item.id !== val.id) {
                    return item
                }
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消删除',
            })
        })

}

// 传给一排按钮的数据+方法
const todoButton = [
    { id: 1, name: '添加', fn: addOne, icon: '&#xe613;' },
    { id: 2, name: '导入', icon: '&#xe637;' },
    { id: 3, name: '导出', icon: '&#xe61b;' },
    { id: 4, name: '转移商机', icon: '&#xe697;' },
    { id: 5, name: '添加协作', icon: '&#xea34;' },
    { id: 6, name: '发送短信', icon: '&#xe804;' },
]

// 给按钮绑定事件
function addOne() {
    // console.log("添加");
    rou.push('/home/addtwo')

}
// import axios from 'axios';
// const corpData: Ref<CorporateData[]> = ref([
//   {
//     id: 999,
//     corpName: "先属精们里。",
//     corpState: "没有跟进",
//     starRating: "★★",
//     cdetailNumber: 999,
//     user_type: "企业用户",
//     address: "澳门特别行政区",
//     follow_up_status: "正常",
//     last_follow_up_date: "1900-09-1901T1:5:17.000Z",
//     industry: "汽车",
//     primary_contact: "颜如玉",
//     birthday: "2002-01-06T1:0:00.000Z",
//     title: "Fdck",
//     phone_number: "13860837637",
//     opportunity_id: 300,
//     previous_follower_id: null,
//     follower_id: null
//   }
// ]);

// 获取数据
// watchEffect(() => {
//   if (corpData.value.length < 0) {
//     getCorp();
//   }
// });

onMounted(() => {
    // getCorp()
    getList()
    const token:any = localStorage.getItem('token')
    user.value = JSON.parse(token)
})
// const getCorp = async () => {
//   //通过 try和catch来进行方式发出意外的错误，用来进行防止整个页面崩溃
//   try {
//     // 执行异步操作，获取外部数据
//     const res = await getCropData()
//     // 对获取到的数据进行处理
//     res.data.map(item => {
//       // console.log(item.last_follow_up_date.slice(0, 10))
//       item.last_follow_up_date = item.last_follow_up_date.slice(0, 10)
//       const differenceInDays = lastDays(item.last_follow_up_date)
//       item.differenceInDays = `${differenceInDays}天`
//       return item
//     })
//     console.log(res.data)
//     corpData.value = res.data;
//   } catch (error) {
//     console.error(error);
//   }
// };

// 表格按钮
let rou = useRouter()
function handleEdit(am: any) {
    rou.push('/home/please/dalite')
    console.log(am, "am");
}


// let handleDelete = async (index: number) => {
//   try {
//     const response = await axios.post("http://localhost:3000/del", {
//       key: `${index}`,
//     });
//     console.log("POST 请求成功:", response.data);
//     datalist();
//   } catch (error) {
//     console.error("POST 请求失败:", error);
//   }
// };

let multipleSelection = ref([]);
function handleSelectionChange(val: any) {
    multipleSelection.value = val;
}

const filteredInfo = ref();
const sortedInfo = ref();


interface DataItem {
    corpName: any;
    key: string;
    name: string;
    age: number;
    address: string;
}

//用来给table传入columns的，他是一个列表，用来表示你自己的字段
const columns = computed<TableColumnType[]>(() => {
    const sorted = sortedInfo.value || {};
    return [
        {
            title: '商机标题',
            dataIndex: 'bo_title',
            key: 'bo_title',
            sorter: (a: DataItem, b: DataItem) => a.corpName.localeCompare(b.corpName, 'zh'),
        },
        {
            title: '关联客户',
            dataIndex: 'corpName',
            key: 'corpName',
        },
        {
            title: '商机阶段',
            dataIndex: 'bo_stage',
            key: 'bo_stage',
        },
        {
            title: '报价记录',
            dataIndex: 'bo_quote_record',
            key: 'bo_quote_record',
        },
        {
            title: '报价总金额',
            dataIndex: 'bo_total_quote_amount',
            key: 'bo_total_quote_amount',
        },
        {
            title: '最后跟进',
            dataIndex: 'bo_SalesStage',
            key: 'bo_SalesStage',
        },
        {
            title: '未跟进天数',
            dataIndex: 'differenceInDays',
            key: 'differenceInDays',
            sorter: (a: DataItem, b: DataItem) => a.age - b.age,
            sortOrder: sorted.columnKey === 'differenceInDays' && sorted.order,
        },
        {
            title: '操作',
            dataIndex: 'differenceInDays',
            key: 'differenceInDays',
            width: '20%',
        },
    ];
});

function onChange(pagination: any, filters: any, sorter: any, extra: any) {
    console.log('params', pagination, filters, sorter, extra);
}


</script>

<style scoped lang="scss"></style>